<!--
 描述: 司南排名图
 作者: Jack Chen
 日期: 2020-04-18
-->

<template>
  <div class="wrap-container sn-container"> 
    <div class="sn-content"> 
      <div class="sn-title">NPP驱动因子</div> 
      <div class="sn-body"> 
        <div class="wrap-container"> 
          <div class="pd-main"> 
            <div id="chart1" class="chart-1"> 
              <div class="compass"> 
                <div class="compass-bg-1"></div> 
                <div class="compass-bg-2"></div> 
                <div class="compass-bg-3"></div> 
                <div class="compass-bg-4"></div> 
                <div class="compass-bg-5"></div> 
                <div class="compass-bg-6"></div> 
                <div class="compass-bg-7"></div>

                <div class="compass-bg-c-1"></div> 
                <div class="compass-bg-c-2"></div> 
                <div class="compass-bg-c-3"></div> 
                <div class="compass-bg-c-4"></div>

                <div class="compass-text" :class="[`compass-text-${index + 1}`, {show: number == index}]" v-for="(item, index) in arr" :key="index">
                  <span>最适区间：{{ item.itemNum }}</span>
                  <span>作用表现：{{ item.dataItem }}</span>
                  <span>占比：{{ item.dataSize }}</span>
                </div>
                <div class="compass-number"> 
                  <div :title="`${index + 1}`" :class="[`rank-${index + 1}`, {szscale: number == index}]" v-for="(item, index) in arr" :key="index">
                   <span>{{ item.workUnit }}</span>
                  </div>
                </div> 

                <div class="line-sx"> 
                  <div class="line-fs"></div> 
                  <div class="line-fs"></div> 
                  <div class="line-fs"></div> 
                  <div class="line-fs"></div> 
                  <div class="line-fs"></div> 
                  <div class="line-fs"></div> 
                  <div class="line-fs"></div> 
                  <div class="line-fs"></div> 
                  <div class="line-fs"></div> 
                </div>
              </div>
            </div>
          </div>  
        </div> 
      </div> 
    </div>   
  </div>
</template>

<script>
export default {
  name: "factors",
  data() {
    return {
      timer: null,
      number: null,
      arr: [{
        id: 1,
        itemNum: "68100 ~ 73200mm",
        dataItem: "正相关",
        dataSize: 0.219,
        workUnit: 'ET'
      },{
        id: 2,
        itemNum: "0.88 ~ 0.9",
        dataItem: "正相关",
        dataSize: 0.204,
        workUnit: 'NDVI'
      },{
        id: 3,
        itemNum: "0 ~ 0.06",
        dataItem: "负相关",
        dataSize: 0.192,
        workUnit: '夜间灯光'
      },{
        id: 4,
        itemNum: "0.69 ~ 0.70",
        dataItem: "负相关",
        dataSize: 0.184,
        workUnit: 'TVDI'
      },]
    }
  },
  mounted() {
    setTimeout(() => {
      this.number = 0;
      this.initData();
    }, 4000)
  },
  methods: {
    initData() {
      this.number = this.number == this.arr.length ? 0 : this.number;
      this.timer = setTimeout(() => {
        this.number++;
        this.initData();
      }, 5000)
    }
  },
  beforeDestroy() {
    clearTimeout(this.timer);
  }
};
</script>

<style scoped>
.sn-container {
  left: 50px;
  top: 110px;
}
.sn-container .pd-main {
  position: absolute;
  height: 100%;
  width: 100%;
}
.sn-title{
  margin-top: 3px;
  color: aliceblue;
  font-size: 18px;  
  text-align: center;
}
.sn-container .pd-main [class^=chart] {
  position: absolute;
  -webkit-transform-origin: left top;
  -moz-transform-origin: left top;
  -ms-transform-origin: left top;
  -o-transform-origin: left top;
  transform-origin: left top;
}
.sn-container .pd-main .chart-1 {
  width: 100%;
  height: 100%;
  top: 0%;
  left: 0%;
  /* -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%); */
  /* transform: translate(-50%, -50%); */
}
.sn-container .pd-main .compass {
  width: 100%;
  height: 100%;
  -webkit-transform: scale(0.9);
  -moz-transform: scale(0.9);
  -ms-transform: scale(0.9);
  -o-transform: scale(0.9);
  transform: scale(0.9);
}
.sn-container .pd-main .compass [class^=compass-bg-] {
  position: absolute;
  bottom: 0;
}
.sn-container .pd-main .compass .compass-bg-1,
.sn-container .pd-main .compass .compass-bg-2,
.sn-container .pd-main .compass .compass-bg-3,
.sn-container .pd-main .compass .compass-bg-4,
.sn-container .pd-main .compass .compass-bg-5,
.sn-container .pd-main .compass .compass-bg-6,
.sn-container .pd-main .compass .compass-bg-7 {
  position: absolute;
  bottom: 0px;
  left: 50%;
  -webkit-transform: rotateX(-80deg) rotateZ(45deg) rotateY(0deg);
  -moz-transform: rotateX(-80deg) rotateZ(45deg) rotateY(0deg);
  transform: rotateX(-80deg) rotateZ(45deg) rotateY(0deg);
}
.sn-container .pd-main .compass .compass-bg-1 {
  margin-left: -250px;
  bottom: -200px;
  width: 500px;
  height: 500px;
  background: -webkit-repeating-radial-gradient(transparent, rgba(0, 138, 174, 0.2));
  background: -moz-repeating-radial-gradient(transparent, rgba(0, 138, 174, 0.2));
  background: -o-repeating-radial-gradient(transparent, rgba(0, 138, 174, 0.2));
  background: repeating-radial-gradient(transparent, rgba(0, 138, 174, 0.2));
  display: none;
}
.sn-container .pd-main .compass .compass-bg-2 {
  margin-left: -220px;
  bottom: -170px;
  width: 440px;
  height: 440px;
  background: -webkit-repeating-radial-gradient(transparent, rgba(250, 118, 159, 0.2));
  background: -moz-repeating-radial-gradient(transparent, rgba(250, 118, 159, 0.2));
  background: -o-repeating-radial-gradient(transparent, rgba(250, 118, 159, 0.2));
  background: repeating-radial-gradient(transparent, rgba(250, 118, 159, 0.2));
  display: none;
}
.sn-container .pd-main .compass .compass-bg-3 {
  margin-left: -190px;
  bottom: -140px;
  width: 380px;
  height: 380px;
  background: -webkit-repeating-radial-gradient(transparent, rgba(10, 58, 103, 0.2));
  background: -moz-repeating-radial-gradient(transparent, rgba(10, 58, 103, 0.2));
  background: -o-repeating-radial-gradient(transparent, rgba(10, 58, 103, 0.2));
  background: repeating-radial-gradient(transparent, rgba(10, 58, 103, 0.2));
}
.sn-container .pd-main .compass .compass-bg-4 {
  margin-left: -160px;
  bottom: -110px;
  width: 320px;
  height: 320px;
  background: -webkit-repeating-radial-gradient(transparent, rgba(112, 67, 103, 0.2));
  background: -moz-repeating-radial-gradient(transparent, rgba(112, 67, 103, 0.2));
  background: -o-repeating-radial-gradient(transparent, rgba(112, 67, 103, 0.2));
  background: repeating-radial-gradient(transparent, rgba(112, 67, 103, 0.2));
}
.sn-container .pd-main .compass .compass-bg-5 {
  margin-left: -130px;
  bottom: -80px;
  width: 260px;
  height: 260px;
  -webkit-box-shadow: inset 0 0 10px 10px rgba(44, 183, 190, 0.8);
  -moz-box-shadow: inset 0 0 10px 10px rgba(44, 183, 190, 0.8);
  box-shadow: inset 0 0 10px 10px rgba(44, 183, 190, 0.8);
}
.sn-container .pd-main .compass .compass-bg-6 {
  margin-left: -100px;
  bottom: -50px;
  width: 200px;
  height: 200px;
  background: -webkit-repeating-radial-gradient(transparent, rgba(246, 116, 160, 0.2));
  background: -moz-repeating-radial-gradient(transparent, rgba(246, 116, 160, 0.2));
  background: -o-repeating-radial-gradient(transparent, rgba(246, 116, 160, 0.2));
  background: repeating-radial-gradient(transparent, rgba(246, 116, 160, 0.2));
  display: none;
}
.sn-container .pd-main .compass .compass-bg-7 {
  margin-left: -70px;
  bottom: -20px;
  width: 140px;
  height: 140px;
  background: -webkit-repeating-radial-gradient(transparent, rgba(102, 97, 70, 0.2));
  background: -moz-repeating-radial-gradient(transparent, rgba(102, 97, 70, 0.2));
  background: -o-repeating-radial-gradient(transparent, rgba(102, 97, 70, 0.2));
  background: repeating-radial-gradient(transparent, rgba(102, 97, 70, 0.2));
  -webkit-animation: bgshadow 3s linear infinite;
  -moz-animation: bgshadow 3s linear infinite;
  -o-animation: bgshadow 3s linear infinite;
  animation: bgshadow 3s linear infinite;
}
.sn-container .pd-main .compass .compass-bg-c-1 {
  width: 100%;
  height: 100%;
  background: url(../assets/chart1/compass-bg-1.png) no-repeat 50% 275px;
}
.sn-container .pd-main .compass .compass-bg-c-2 {
  width: 100%;
  height: 100%;
  background: url(../assets/chart1/compass-bg-2.png) no-repeat 45% 75px;
  opacity: 0.8;
  -webkit-animation: fadebg 3s linear infinite;
  -moz-animation: fadebg 3s linear infinite;
  -o-animation: fadebg 3s linear infinite;
  animation: fadebg 3s linear infinite;
}
.sn-container .pd-main .compass .compass-bg-c-3 {
  width: 100%;
  height: 100%;
  background: url(../assets/chart1/compass-bg-3.png) no-repeat 50% 227px;
}
.sn-container .pd-main .compass .compass-bg-c-4 {
  width: 100%;
  height: 100%;
  background: url(../assets/chart1/compass-bg-4.png) no-repeat 50% 63px;
  -webkit-animation: numberfade 5s linear infinite;
  -moz-animation: numberfade 5s linear infinite;
  -o-animation: numberfade 5s linear infinite;
  animation: numberfade 5s linear infinite;
}
.sn-container .pd-main .compass .compass-text {
  position: absolute;
  overflow: hidden;
  left: 50%;
  margin-left: -60px;
  font-size: 12px;
  background-color: rgba(0, 71, 157, 0.4);
  padding: 5px 10px;
  color: #00c2ff;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  line-height: 1.5;
  display: none;
}
.sn-container .pd-main .compass .compass-text.compass-text-1 {
  top: -10px;
  left: 40px;
}
.sn-container .pd-main .compass .compass-text.compass-text-2 {
  top: 18px;
  left: 140px;
}
.sn-container .pd-main .compass .compass-text.compass-text-3 {
  top: 35px;
  left: 250px;
}
.sn-container .pd-main .compass .compass-text.compass-text-4 {
  top: 20px;
  left: 300px;
}
.sn-container .pd-main .compass .compass-text.compass-text-5 {
  top: 65px;
  left: 370px;
}
.sn-container .pd-main .compass .compass-text.compass-text-6 {
  color: #d57a31;
  bottom: -945px;
  -webkit-animation-delay: 25s;
  -moz-animation-delay: 25s;
  -o-animation-delay: 25s;
  animation-delay: 25s;
}
.sn-container .pd-main .compass .compass-text.compass-text-7 {
  color: #d57a31;
  bottom: -1150px;
  -webkit-animation-delay: 30s;
  -moz-animation-delay: 30s;
  -o-animation-delay: 30s;
  animation-delay: 30s;
}
.sn-container .pd-main .compass .compass-text span {
  display: block;
  margin-top: 0px;
}
.sn-container .pd-main .compass .compass-text.show {
  display: block;
}
.sn-container .pd-main .compass .compass-number {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  bottom: 0px;
}
.sn-container .pd-main .compass .compass-number > .szscale {
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
  transform: scale(1.2);
  -webkit-transform-origin: center bottom;
  -moz-transform-origin: center bottom;
  -ms-transform-origin: center bottom;
  -o-transform-origin: center bottom;
  transform-origin: center bottom;
}
.sn-container .pd-main .compass .compass-number > div {
  position: absolute;
  bottom: 0;
  width: 55px;
  height: 0;
  -webkit-animation: sz 1s linear;
  -moz-animation: sz 1s linear;
  -o-animation: sz 1s linear;
  animation: sz 1s linear;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-transition: 1s;
  -o-transition: 1s;
  -moz-transition: 1s;
  transition: 1s;
}
.sn-container .pd-main .compass .compass-number > div:nth-child(1) {
  left: 3%;
  color: #ff9232;
  -webkit-animation-delay: 0s;
  -moz-animation-delay: 0s;
  -o-animation-delay: 0s;
  animation-delay: 0s;
  bottom: -10%
}
.sn-container .pd-main .compass .compass-number > div:nth-child(1):after {
  -webkit-animation-delay: 0s;
  -moz-animation-delay: 0s;
  -o-animation-delay: 0s;
  animation-delay: 0s;
}
.sn-container .pd-main .compass .compass-number > div:nth-child(2) {
  left: 29%;
  color: #d5c245;
  -webkit-animation-delay: 0.2s;
  -moz-animation-delay: 0.2s;
  -o-animation-delay: 0.2s;
  animation-delay: 0.2s;
  bottom: -15%;
}
.sn-container .pd-main .compass .compass-number > div:nth-child(2):after {
  -webkit-animation-delay: 2.85s;
  -moz-animation-delay: 2.85s;
  -o-animation-delay: 2.85s;
  animation-delay: 2.85s;
}
.sn-container .pd-main .compass .compass-number > div:nth-child(3) {
  left: 58%;
  color: #01a455;
  -webkit-animation-delay: 0.4s;
  -moz-animation-delay: 0.4s;
  -o-animation-delay: 0.4s;
  animation-delay: 0.4s;
  bottom: -20%;
}
.sn-container .pd-main .compass .compass-number > div:nth-child(3):after {
  -webkit-animation-delay: 5.7s;
  -moz-animation-delay: 5.7s;
  -o-animation-delay: 5.7s;
  animation-delay: 5.7s;
}
.sn-container .pd-main .compass .compass-number > div:nth-child(4) {
  left: 82%;
  color: #85adfb;
  -webkit-animation-delay: 0.6s;
  -moz-animation-delay: 0.6s;
  -o-animation-delay: 0.6s;
  animation-delay: 0.6s;
  bottom: -25%;
}
.sn-container .pd-main .compass .compass-number > div:nth-child(4):after {
  -webkit-animation-delay: 8.55s;
  -moz-animation-delay: 8.55s;
  -o-animation-delay: 8.55s;
  animation-delay: 8.55s;
}
.sn-container .pd-main .compass .compass-number > div:nth-child(5) {
  left: 85%;
  color: #c36885;
  -webkit-animation-delay: 0.8s;
  -moz-animation-delay: 0.8s;
  -o-animation-delay: 0.8s;
  animation-delay: 0.8s;
  bottom: -30%;
}
.sn-container .pd-main .compass .compass-number > div:nth-child(5):after {
  -webkit-animation-delay: 11.4s;
  -moz-animation-delay: 11.4s;
  -o-animation-delay: 11.4s;
  animation-delay: 11.4s;
}
.sn-container .pd-main .compass .compass-number > div:nth-child(6) {
  left: 75%;
  color: #f674a0;
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  -o-animation-delay: 1s;
  animation-delay: 1s;
  bottom: -50%;
}
.sn-container .pd-main .compass .compass-number > div:nth-child(6):after {
  -webkit-animation-delay: 14.25s;
  -moz-animation-delay: 14.25s;
  -o-animation-delay: 14.25s;
  animation-delay: 14.25s;
}
.sn-container .pd-main .compass .compass-number > div:nth-child(7) {
  left: 87.5%;
  color: #275fcc;
  -webkit-animation-delay: 1.2s;
  -moz-animation-delay: 1.2s;
  -o-animation-delay: 1.2s;
  animation-delay: 1.2s;
  bottom: -60%;
}
.sn-container .pd-main .compass .compass-number > div:nth-child(7):after {
  -webkit-animation-delay: 17.1s;
  -moz-animation-delay: 17.1s;
  -o-animation-delay: 17.1s;
  animation-delay: 17.1s;
}
.sn-container .pd-main .compass .compass-number > div span {
  display: block;
  width: 55px;
  height: 55px;
  line-height: 55px;
  text-align: center;
  -webkit-box-shadow: inset 0 0 15px currentColor;
  -moz-box-shadow: inset 0 0 15px currentColor;
  box-shadow: inset 0 0 15px currentColor;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
}
.sn-container .pd-main .compass .compass-number > div:before {
  content: "";
  position: absolute;
  height: 100%;
  border-left: 1px dashed currentColor;
  height: 200px;
  top: 55px;
  left: 50%;
  margin-left: -1px;
}
.sn-container .pd-main .compass .compass-number > div:after {
  content: "NO." attr(title);
  position: absolute;
  display: inline-block;
  top: -20px;
  width: 100%;
  font-family: "DIGITALDREAMFAT";
  text-align: center;
}
.sn-container .pd-main .compass .line-sx > div:nth-child(2) {
  height: 90%;
  -webkit-animation-duration: 2s;
  -moz-animation-duration: 2s;
  -o-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-delay: 1.5s;
  -moz-animation-delay: 1.5s;
  -o-animation-delay: 1.5s;
  animation-delay: 1.5s;
  bottom: 0;
  left: 51px;
}
.sn-container .pd-main .compass .line-sx > div:nth-child(3) {
  height: 100%;
  -webkit-animation-duration: 3s;
  -moz-animation-duration: 3s;
  -o-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-delay: 0s;
  -moz-animation-delay: 0s;
  -o-animation-delay: 0s;
  animation-delay: 0s;
  bottom: 32px;
  left: 89px;
}
.sn-container .pd-main .compass .line-sx > div:nth-child(4) {
  height: 100%;
  -webkit-animation-duration: 2.5s;
  -moz-animation-duration: 2.5s;
  -o-animation-duration: 2.5s;
  animation-duration: 2.5s;
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  -o-animation-delay: 1s;
  animation-delay: 1s;
  bottom: 3px;
  left: 179px;
  -webkit-filter: hue-rotate(180deg);
  filter: hue-rotate(180deg);
}
.sn-container .pd-main .compass .line-sx > div:nth-child(5) {
  height: 90%;
  -webkit-animation-duration: 2s;
  -moz-animation-duration: 2s;
  -o-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-delay: 2s;
  -moz-animation-delay: 2s;
  -o-animation-delay: 2s;
  animation-delay: 2s;
  bottom: 42px;
  left: 229px;
}
.sn-container .pd-main .compass .line-sx > div:nth-child(6) {
  height: 100%;
  -webkit-animation-duration: 2.5s;
  -moz-animation-duration: 2.5s;
  -o-animation-duration: 2.5s;
  animation-duration: 2.5s;
  -webkit-animation-delay: 0.5s;
  -moz-animation-delay: 0.5s;
  -o-animation-delay: 0.5s;
  animation-delay: 0.5s;
  bottom: 11px;
  right: 48px;
}
.sn-container .pd-main .compass .line-sx > div:nth-child(7) {
  height: 90%;
  -webkit-animation-duration: 3s;
  -moz-animation-duration: 3s;
  -o-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-delay: 2.5s;
  -moz-animation-delay: 2.5s;
  -o-animation-delay: 2.5s;
  animation-delay: 2.5s;
  bottom: -22px;
  right: 174px;
  -webkit-filter: hue-rotate(180deg);
  filter: hue-rotate(180deg);
}
.sn-container .pd-main .compass .line-sx > div:nth-child(8) {
  height: 90%;
  -webkit-animation-duration: 3s;
  -moz-animation-duration: 3s;
  -o-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-delay: 1.5s;
  -moz-animation-delay: 1.5s;
  -o-animation-delay: 1.5s;
  animation-delay: 1.5s;
  bottom: -22px;
  right: 100px;
}
.sn-container .pd-main .compass .line-sx > div:nth-child(9) {
  height: 100%;
  -webkit-animation-duration: 2.5s;
  -moz-animation-duration: 2.5s;
  -o-animation-duration: 2.5s;
  animation-duration: 2.5s;
  -webkit-animation-delay: 2s;
  -moz-animation-delay: 2s;
  -o-animation-delay: 2s;
  animation-delay: 2s;
  bottom: -10px;
  right: 220px;
}
.sn-container .pd-main .compass .line-sx > div:nth-child(10) {
  height: 95%;
  -webkit-animation-duration: 2s;
  -moz-animation-duration: 2s;
  -o-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  -o-animation-delay: 1s;
  animation-delay: 1s;
  bottom: -41px;
  right: 182px;
}
.sn-container .pd-main .compass .line-sx .line-fs {
  width: 14px;
  height: 100%;
  background: url(../assets/chart1/line-fs.png) no-repeat;
  background-position: 50% 150%;
  position: absolute;
  z-index: -1;
  -webkit-animation: fs 3s cubic-bezier(1, 0, 0.6, 0.6) infinite;
  -moz-animation: fs 3s cubic-bezier(1, 0, 0.6, 0.6) infinite;
  -o-animation: fs 3s cubic-bezier(1, 0, 0.6, 0.6) infinite;
  animation: fs 3s cubic-bezier(1, 0, 0.6, 0.6) infinite;
}

@-webkit-keyframes fs {
  0% {
    background-position: 50% 150%;
  }
  50% {
    background-position: 50% -132%;
  }
  100% {
    background-position: 50% -264%;
    opacity: 0;
  }
}
@-moz-keyframes fs {
  0% {
    background-position: 50% 150%;
  }
  50% {
    background-position: 50% -132%;
  }
  100% {
    background-position: 50% -264%;
    opacity: 0;
  }
}
@-o-keyframes fs {
  0% {
    background-position: 50% 150%;
  }
  50% {
    background-position: 50% -132%;
  }
  100% {
    background-position: 50% -264%;
    opacity: 0;
  }
}
@keyframes fs {
  0% {
    background-position: 50% 150%;
  }
  50% {
    background-position: 50% -132%;
  }
  100% {
    background-position: 50% -264%;
    opacity: 0;
  }
}
@-webkit-keyframes bgshadow {
  0%, 100% {
    -webkit-box-shadow: 0 0 0 rgba(255, 255, 255, 0);
    box-shadow: 0 0 0 rgba(255, 255, 255, 0);
  }
  50% {
    -webkit-box-shadow: 0 0 30em white;
    box-shadow: 0 0 30em white;
  }
}
@-moz-keyframes bgshadow {
  0%, 100% {
    -moz-box-shadow: 0 0 0 rgba(255, 255, 255, 0);
    box-shadow: 0 0 0 rgba(255, 255, 255, 0);
  }
  50% {
    -moz-box-shadow: 0 0 30em white;
    box-shadow: 0 0 30em white;
  }
}
@-o-keyframes bgshadow {
  0%, 100% {
    box-shadow: 0 0 0 rgba(255, 255, 255, 0);
  }
  50% {
    box-shadow: 0 0 30em white;
  }
}
@keyframes bgshadow {
  0%, 100% {
    -webkit-box-shadow: 0 0 0 rgba(255, 255, 255, 0);
    -moz-box-shadow: 0 0 0 rgba(255, 255, 255, 0);
    box-shadow: 0 0 0 rgba(255, 255, 255, 0);
  }
  50% {
    -webkit-box-shadow: 0 0 30em white;
    -moz-box-shadow: 0 0 30em white;
    box-shadow: 0 0 30em white;
  }
}
@-webkit-keyframes sz {
  0% {
    height: 0;
  }
  100% {
    height: 70%;
  }
}
@-moz-keyframes sz {
  0% {
    height: 0;
  }
  100% {
    height: 70%;
  }
}
@-o-keyframes sz {
  0% {
    height: 0;
  }
  100% {
    height: 70%;
  }
}
@keyframes sz {
  0% {
    height: 0;
  }
  100% {
    height: 70%;
  }
}
</style>
